/* Supporting styles for pretty-quasi-output.js */

/* Show quasis and nested quasis with an underline.  Make sure the
 * border only extends to the right of the content, not the right of the
 * page, by using inline-block. */
.pretty-quasi, .pretty-quasi .nested {
  display: inline-block; border-bottom: 2px solid #888
}
/* Stop the underlines from fusing together. */
.pretty-quasi .nested { margin-bottom: 2px }
/* Color dynamic sections with alternating backgrounds so that zero-length
 * static portions don't make things visually indistinct. */
.pretty-quasi .dynamic.ord0 { background-color: #faa }
.pretty-quasi .dynamic.ord1 { background-color: #f9f }
.pretty-quasi .dynamic.ord2 { background-color: #ffc }
/* Display the interpolated value details on hover, below the content. */
.pretty-quasi .dynamic:hover .tooltip { display: block }
.pretty-quasi .dynamic { position: relative } /* dynamic is a layout parent */
.pretty-quasi .dynamic .tooltip {
  display: none;
  position: absolute;
  /* top: 100% means position the top at the bottom of the layout parent. */
  top: 100%;
  /* position at the left of the layout parent. */
  left: 0;
  background: #fff;
  z-index: 1;
  white-space: pre;
  border: 1px solid black
}
